<template>
  <div class="box">
    <div v-for="tu in pintu" :key="tu" class="pt">
      <div class="tu">
        <el-image :src="tu.url" ></el-image>
      </div>
      <div class="info">
        <p>拼图标题</p>
        <p class="info">xxxxxxxxxxxxxxxxxxxx</p>
      </div>
      <div class="shu">
        <span>总份数:</span><span>300</span><span>格数:</span><span>250</span> <span>已完成:</span><span>10</span><br>
        <span>奖品:</span><span>10</span> <span>开始时间:</span><span>2021-07-02</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PinTu",
  data() {
    return {
      pintu: [
        {url: require("../assets/logo.png")},
        {url: require("../assets/logo.png")},
        {url: require("../assets/logo.png")},
        {url: require("../assets/logo.png")},
      ]
    }
  }
}
</script>

<style scoped>
.pt {
  width: 480px;
  height:300px;
  margin-top: 80px;
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  margin-right: 60px;
}
.box {
  display: flex;
  flex-wrap: wrap;
  margin-left: 70px;
  justify-content: center;
}
.tu{
  margin-left: 20px;
  margin-top: 30px;
}
.info{
  margin-top: 30px;
  margin-left: 20px;
  margin-right: 20px;
  width: 200px;
  height: 200px;
}
.shu{
  width: 450px;
  margin-left: 20px;
}
.shu span{
  margin-right: 20px;
}
</style>
